<template>
  <div class="">
    <CommonPanel name="left" :width="scale(550) + 'px'">
      <div class="panel-wrapper">
        <div class="capacity-row">
          <div class="title">
            <span>调用基础能力</span>
          </div>
          <div class="content">
            <el-button type="primary" @click="goHome">返回index</el-button>
          </div>
        </div>
        <div class="capacity-row">
          <div class="title">
            <span>调用{{ engineName }}基本能力</span>
          </div>
          <div class="content">
            <el-button type="primary" @click="goToShenZhen">定位深圳</el-button>
            <!-- <el-button type="primary" @click="drawPolygon">绘制一个面</el-button> -->
          </div>
        </div>
        <div class="capacity-row">
          <div class="title">
            <span>调用平台能力</span>
          </div>
          <div class="content">
            <el-button type="primary" v-if="engineName === MARS3D_NAME" @click="toggleBaseMap">
              切换底图
            </el-button>
          </div>
        </div>
      </div>
    </CommonPanel>
    <CommonPanel name="right" :width="scale(550) + 'px'">
      <div class="panel-wrapper right">
        <div class="capacity-row">
          <div class="title">
            <span>切换引擎：当前{{ engineName }}</span>
          </div>
          <div class="content">
            <el-button type="primary" @click="goAcEngine" v-if="engineName === MARS3D_NAME">
              切换到飞渡
            </el-button>
            <el-button type="primary" @click="goMars3dEngine" v-if="engineName === AC_NAME">
              切换到Cesium
            </el-button>
          </div>
        </div>
      </div>
    </CommonPanel>
    <!-- EXAMPLE: 在index.vue中实现地图功能 -->
    <Mars3dLayer ref="mars3dRef" v-if="engineName === MARS3D_NAME" />
    <AcLayer ref="acRef" v-if="engineName === AC_NAME" />
  </div>
</template>

<script setup lang="ts">
import { inject, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { scale } from '@sutpc/config';
import Mars3dLayer from './components/mars3d-layer/index.vue';
import AcLayer from './components/ac-layer/index.vue';

const router = useRouter();

const {
  mapInstance,
  AC_NAME,
  MARS3D_NAME,
  useEmitt,
  components,
  useProjectMapMethods,
  useProjectMethods
}: any = inject('main');

const engineName = ref('');
const mars3dRef = ref(null);
const acRef = ref(null);
const CommonPanel = components.CommonPanel;
const { setMars3dBaseMap } = useProjectMapMethods();
const { setProjectEngin, setMapEngine } = useProjectMethods();

useEmitt('MAP_READY', () => {
  engineName.value = mapInstance.value.type;
});

const goHome = () => {
  const appkey = import.meta.env.VITE_APP_KEY;
  router.push({ name: appkey + '-index' });
};

const goToShenZhen = () => {
  engineName.value === MARS3D_NAME ? mars3dRef.value.goToShenZhen() : acRef.value.goToShenZhen();
};

const toggleBaseMap = () => {
  // console.log(Cesium);
  setMars3dBaseMap('dark'); //设置深色底图
};

const goAcEngine = async () => {
  try {
    await setProjectEngin();
  } catch (error) {
    console.log('error: ', error);
  }
};

const goMars3dEngine = () => {
  try {
    setMapEngine(MARS3D_NAME);
  } catch (error) {
    console.log('error: ', error);
  }
};
console.log('test')
onMounted(() => {
  engineName.value = mapInstance.value?.type;
});
</script>

<style lang="less" scoped>
.panel-wrapper {
  padding-top: 100px;
  padding-left: 10px;
  font-size: 30px;

  &.right {
    padding-right: 30px;
  }

  .capacity-row {
    .content {
      padding-top: 10px;
      padding-left: 20px;
    }
  }

  .title {
    font-size: 24px;
  }
}
</style>
